import React, { useState } from 'react'
import { Modal, Table, Form, Input, Button } from 'antd'
import { ColumnProps } from 'antd/lib/table'
import ItemModal from '~/components/item-modal'

let cacheRecord: any = {}

const columns = ({ setModalVisible }: any): ColumnProps<any>[] => [
  {
    title: '序号',
    dataIndex: 'id',
    align: 'center',
    render: (_: any, record: any, index: number) => <div>{index + 1}</div>
  },
  {
    title: '物品编号',
    dataIndex: 'serialNo',
    align: 'center',
    render: (serialNo: any, record: any) => (
      <a
        onClick={() => {
          cacheRecord = record
          setModalVisible(true)
        }}
      >
        {serialNo}
      </a>
    )
  },
  {
    title: '物品名称',
    dataIndex: 'itemName',
    align: 'center',
    render: (itemName: any, record: any) => (
      <a
        onClick={() => {
          cacheRecord = record
          setModalVisible(true)
        }}
      >
        {itemName}
      </a>
    )
  },
  {
    title: '数量 (单位)',
    align: 'center',
    dataIndex: 'id3'
  },
  {
    title: '规格',
    align: 'center',
    dataIndex: 'id'
  },
  {
    title: '特征',
    align: 'center',
    dataIndex: 'id'
  },
  {
    title: '备注',
    align: 'center',
    dataIndex: 'id'
  },
  {
    title: '保管状态',
    align: 'center',
    dataIndex: 'id'
  }
]

const PropertySelect = ({ selectVisible }: any) => {
  const [form] = Form.useForm()
  const [modalVisible, setModalVisible] = useState(false)
  const { resetFields } = form
  const rowSelection = {}

  return (
    <div>
      <Modal width={958} visible={selectVisible}>
        <Form validateTrigger="onBlur" layout="inline" form={form} style={{ marginBottom: 16 }}>
          <Form.Item name="caseNo" label="案件编号：">
            <Input placeholder="请输入案件编号搜索" />
          </Form.Item>
          <Form.Item name="caseName" label="案件名称：">
            <Input placeholder="请输入案件名称搜索" />
          </Form.Item>
          <Form.Item>
            <Button onClick={() => resetFields()} type="link" style={{ padding: 0 }}>
              清空选项
            </Button>
          </Form.Item>
        </Form>
        <Table bordered rowSelection={rowSelection} columns={columns({ setModalVisible })}></Table>
      </Modal>
      <ItemModal visible={modalVisible} setVisible={setModalVisible} record={cacheRecord} />
    </div>
  )
}

export default PropertySelect
